<template>
	<view class="box">

		<!-- 到店信息 -->
		<view class="arrivalInfo" v-if="orderInfo">
			<view class="title">
				<span v-if="orderInfo.status==0">待支付</span>
				<span v-if="orderInfo.status==1">待发货</span>
				<span v-if="orderInfo.status==2">待收货</span>
				<span v-if="orderInfo.status==3">已完成</span>
				<span v-if="orderInfo.status==4">退款中</span>
				<span v-if="orderInfo.status==5">退款完成</span>
				<span v-if="orderInfo.status==-1">已取消</span>
				<span v-if="orderInfo.status==-2">拒绝退款</span>
			</view>
			<view class="ctBox" v-if="orderInfo.address">
				<view class="titleInfo">
					收货地址信息
				</view>
				<view class="user ct">
					<span>收货人:</span><span>{{orderInfo.address.contact_person}}
						{{orderInfo.address.contact_phone}}</span>
				</view>
				<view class="shopName ct">
					<span>{{orderInfo.address.address}}</span>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="shopInfo" v-if="orderInfo">
			<view class="title">
				商品信息
			</view>
			<view class="ctBox" v-for="item in orderInfo.goods" :key="item.id">
				<view class="left">
					<image :src="item.goods_images_format[0]" mode="widthFix" style="width: 160rpx; height: 160rpx;">
					</image>
				</view>
				<view class="right">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="type">
						<span>数量</span> <span>x{{item.goods_number}}</span>
					</view>
					<view class="price">
						￥{{item.goods_price}}
					</view>
				</view>
			</view>
			<view class="totalPrice">
				<span>商品总价</span> <span>￥698.00</span>
			</view>
			<view class="totalPrice">
				<span>配送费</span> <span>￥{{orderInfo.express_fee}}</span>
			</view>
			<view class="totalPrice" v-if="orderInfo.coupon_amount>0">
				<span>优惠券抵扣</span> <span>-￥{{orderInfo.coupon_amount}}</span>
			</view>
			<view class="confirmPrice">
				<span>￥{{orderInfo.pay_amount}}</span> <span>合计：</span> <span>共{{orderInfo.goods.length}}件</span>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="orderInfo" v-if="orderInfo">
			<view class="title">
				订单信息
			</view>
			<view class="number ct">
				订单编号：{{orderInfo.order_no}}
			</view>
			<view class="createTime ct">
				创建时间：{{orderInfo.created_at}}
			</view>
			<view class="createTime ct" v-if="orderInfo.pay_time">
				支付时间：{{orderInfo.pay_time}}
			</view>
			<view class="remark ct" v-if="orderInfo.type">
				订单类型：<span v-if="orderInfo.type==1">商家配送</span><span v-if="orderInfo.type==2">用户自提</span>
			</view>
		
			<view class="remark ct">
				订单备注：{{orderInfo.remark||"无"}}
			</view>
		
		</view>
	<!-- 	<view class="btns" v-if="type==0">
			<view class="instant">
				立即接单
			</view>
			
			<view class="cancel btn" @click="showRefuse">
				拒绝接单
			</view>
			<view class="lx btn">
				联系用户
			</view>
		</view>
		<view class="btns" v-if="type==1">
			<view class="commit btn" >
				开始配送
			</view>
			<view class="realtaions ">
				联系用户
			</view>
		</view>
		<view class="btns" v-if="type==2">
			<view class="commit" >
				确认收货
			</view>
			<view class="realtaions">
				联系用户
			</view>
		</view>
		
		<view class="btns" v-if="type==3">
			<view class="commit" @click="showHx">
				确认核销
			</view>
			<view class="realtaions">
				联系用户
			</view>
		</view>
		<view class="btns" v-if="type==4">
			
			<view class="btn">
				已完成
			</view>
			<view class="btn" >
				联系用户
			</view>
		</view>
		<u-popup v-model="showRefusePop" mode="center" width="610rpx" height="520rpx" :closeable="true"
			border-radius="20">
			<view class="pop">
				<view class="title">
					拒绝接单提示
				</view>
				<view class="response">
					<textarea placeholder="请填写拒单原因" />
				</view>
				<view class="tips">
					注：拒接订单必须填写原因！！！
				</view>
				<view class="btn">
					确认拒单
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showHxPop" mode="center" width="610rpx" height="520rpx" :closeable="true"
			border-radius="20">
			<view class="pop">
				<view class="title">
					商品提货核销
				</view>
				<view class="code">
					<input type="text" placeholder="请输入提货码" />
				</view>
				<view class="tips">
					注：提货码由提货人提供，请输入正确的提货
					码，确认完成提货。
				</view>
				<view class="btn">
					确认已提货
				</view>
			</view>
		</u-popup>
		<view class="hhh" style="height: 100rpx;">

		</view> -->
		
	</view>
</template>

<script>
	import {GetOrderDetail} from '@/api/user.js'
	export default {
		data() {
			return {
				type: 4,
				showRefusePop: false,
				showHxPop:false,
				orderInfo:""
				
			}
		},
		onLoad(res) {
			this.initData(res.id)
		},
		methods: {
			initData(id){
				GetOrderDetail(id).then(res=>{
					console.log(res);
					this.orderInfo = res.data[0]
				})
			},
			showRefuse(){
				this.showRefusePop = true
			},
			showHx(){
				this.showHxPop = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 1rpx;
		background-color: #f5f5f5;
	}

	//到店信息
	.arrivalInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {

			font-size: 42rpx;
		}

		.ctBox .titleInfo {
			margin-top: 20rpx;
			font-size: 30rpx;
		}

		.ctBox .ct {
			margin-top: 10rpx;
			font-size: 28rpx;
		}

		.ctBox .addressInfo {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			justify-content: space-between;

			.text {
				width: 594rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.openDtIcon {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				background-image: url('/static/dhd.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

			.dwIcon {
				display: inline-block;
				width: 20rpx;
				height: 24rpx;
				background-image: url('/static/location2.png');
				background-size: cover;
				background-repeat: no-repeat;
			}

		}

		.codeBox {
			padding: 20rpx 0;
			border-top: 1rpx solid #E6E6E6;
			text-align: center;

			.title {
				font-size: 28rpx;
				padding: 10rpx 0;
			}

			.code {
				font-size: 60rpx;
				padding: 10rpx 0;
			}

			.codePic {
				width: 300rpx;
				height: 300rpx;
				margin: 10rpx auto;
			}

			.notice {
				font-size: 24rpx;
				padding: 10rpx 0;
				color: #D3BA5B;
			}
		}
	}

	//商品信息
	.shopInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {
			font-size: 30rpx;
		}

		.ctBox {
			display: flex;
			justify-content: space-between;
			padding: 0 0 20rpx 0;
			margin-top: 30rpx;

			.left {
				width: 160rpx;
				height: 160rpx;
			}

			.right {
				width: 500rpx;
				height: 160rpx;

			}

			.right .name {
				font-size: 26rpx;
				width: 500rpx;
				height: 53rpx;
				line-height: 53rpx;
			}

			.right .type {
				display: flex;
				width: 500rpx;
				justify-content: space-between;
				height: 53rpx;
				line-height: 53rpx;
				color: #999999;
			}

			.right .price {
				width: 500rpx;
				font-size: 30rpx;
				color: #FA453C;
				height: 53rpx;
				line-height: 53rpx;
			}

		}

		.totalPrice {
			width: 670rpx;
			padding: 20rpx 0;
			display: flex;
			font-size: 28rpx;
			border-top: 1px solid #F0F1F2;
		}

		.confirmPrice {
			display: flex;
			padding: 20rpx 0;
			flex-direction: row-reverse;
			border-top: 1px solid #F0F1F2;
			span {
				margin: 0 8rpx;
			}
		}

	}

	// 订单信息
	.orderInfo {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin: 20rpx auto;

		.ct {
			padding: 10rpx 0;
			font-size: 30rpx;
		}

	}

	//按钮
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
		box-sizing: border-box;
		padding: 0 20rpx;
		text-align: center;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		line-height: 60rpx;

		.instant {

			width: 150rpx;
			height: 60rpx;
			background: #6BC665;
			border-radius: 30rpx;
			color: #fff;
		}

		.btn{
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #E6E6E6;
			border-radius: 30rpx;
			color: #333333;
			margin: 0 30rpx;
		}

		.realtaions {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #E6E6E6;
			border-radius: 30rpx;
			color: #666;
			margin: 0 60rpx;
		}

		.commit {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #6BC665;
			border-radius: 30rpx;
			color: #6BC665;
		}
	}

	// 弹出

	.popCommit {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		padding: 10rpx 20rpx;

		.titles {
			font-size: 36rpx;
			text-align: center;
			padding: 10rpx 0 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.rates {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e6e6e6;
			font-size: 28rpx;

			.rateTitle {
				width: 120rpx;
			}

			.reateSelet {
				width: 400rpx;
			}

			.rateCt {
				width: 80rpx;
			}
		}

		.commentCt {
			border-bottom: 1rpx solid #e6e6e6;

			.title {
				padding: 20rpx 0;
			}

			.Ct {
				width: 650rpx;
				height: 150rpx;
				overflow: hidden;
			}

			.picS {
				display: flex;
				align-items: center;
			}

			.picS .item {
				width: 200rpx;
				height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				overflow: hidden;
				margin: 40rpx 40rpx 40rpx 0;
			}

		}

		.submitBtn {
			width: 690rpx;
			height: 80rpx;
			background: #6BC665;
			border-radius: 40rpx;
			text-align: center;
			margin: 40rpx auto;
			line-height: 80rpx;
			color: #fff;
		}
	}
	// 拒单提示
	.pop {
		width: 610rpx;
		height: 520rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	
		.title {
			font-size: 34rpx;
			color: #333;
			width: 570rpx;
			text-align: center;
			margin: 10rpx auto;
		}
	
		.response {
			width: 560rpx;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 20rpx auto;
		}
	
		.tips {
			font-size: 26rpx;
			color: #FA453CFF;
			margin-top: 60rpx;
		}
		.code{
			width: 560rpx;
			height: 80rpx;
			background: #FFFFFF;
			border: 1px solid #E6E6E6;
			border-radius: 10rpx;
			margin: 40rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
		}
	
		.btn {
			width: 560rpx;
			height: 70rpx;
			background: #6BC665;
			border-radius: 10rpx;
			margin: 30rpx auto;
			font-size: 30rpx;
			text-align: center;
			color: #fff;
			line-height: 70rpx;
		}
	}
</style>